<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>画板</title>
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
  <!-- <link rel="stylesheet" href="//at.alicdn.com/t/font_ot2a9rn0wgffxbt9.css"> -->
  <link rel="stylesheet" href="/assets/css/canvas/mopan5.css">
</head>
<body>

  <canvas id="canvas"></canvas>

  <div class="test" id="caozuoArea">

  
    <section class="tool-bar" id="tool">
      <div class="tool_Item">
        <img src="https://xcx-1256535092.cos.ap-shanghai.myqcloud.com/molihuaban/item/zydc.png" id="pencil" class="moshi actived">
        <div>自由模式</div> 
      </div>
      <div class="tool_Item">
        <img src="https://xcx-1256535092.cos.ap-shanghai.myqcloud.com/molihuaban/item/zyms.png" id="zuoyou" class="moshi ">
        <div>左右对称</div> 
      </div>
      <div class="tool_Item">
        <img src="https://xcx-1256535092.cos.ap-shanghai.myqcloud.com/molihuaban/item/zxxz.png" id="xuanzhuan" class="moshi ">
        <div>旋转对称</div> 
        <select id="xuanzhuanSelect" style="position: absolute;top: 5%;left: 53%;width: 20%;height: 27%;opacity: 0;">
          <option value="4">4条对称线</option>
          <option value="6">6条对称线</option>
          <option value="8">8条对称线</option>
          <option value="10">10条对称线</option>
          <option value="12">12条对称线</option>
          <option value="18">18条对称线</option>
          <option value="20">20条对称线</option>
          <option value="24">24条对称线</option>
          <option value="30">30条对称线</option>
        </select>
      </div>
      <div class="tool_Item">
        <img src="https://xcx-1256535092.cos.ap-shanghai.myqcloud.com/molihuaban/item/dcxz.png" id="zhongxin" class="moshi " hidden>
        <img src="https://xcx-1256535092.cos.ap-shanghai.myqcloud.com/mopan/dcxzlock.png" id="zhongxinlock" alt="">
        <div>中心对称</div> 
        <select id="zhongxinSelect" style="position: absolute;top: 7%;left: 77%;width: 16%;height: 24%;opacity: 0;" hidden>
            <option value="6">6条对称线</option>
            <option value="8">8条对称线</option>
            <option value="9">9条对称线</option>
            <option value="10">10条对称线</option>
            <option value="12">12条对称线</option>
            <option value="15">15条对称线</option>
            <option value="18">18条对称线</option>
            <option value="19">19条对称线</option>
            <option value="20">20条对称线</option>
        </select>
        <img src="https://xcx-1256535092.cos.ap-shanghai.myqcloud.com/mopan/lock.png" id="lock" class="lock" hidden>
      </div>
      <!-- <div class="tool_Item">
        <img src="http://pic.qiantucdn.com/58pic/28/24/53/71q58PICi5D_1024.jpg!qtwebp324" id="pingpu" class="moshi ">
        平铺模式
      </div> -->
      <!-- <i class="iconfont icon-pencil" id="pencil"></i> -->
      <!-- <i class="iconfont icon-line" id="line"></i> -->
      <!-- <i class="iconfont icon-rect" id="rect"></i> -->
      <!-- <i class="iconfont icon-xiangpi" id="eraser"></i> -->
      <!-- <i class="iconfont icon-round" id="round"></i> -->
    </section>

    <div id="caozuo2">
      <!-- 调色板 -->
      <section class="palette" id="Palette">
        <i class="iconfont icon-tiaosepan icon-palette" id="toPalette"></i>
        <div class="bar">
          <div class="scroll">
            <i class="item black"></i>
            <i class="item red"></i>
            <i class="item pink"></i>
            <i class="item purple"></i>
            <i class="item deep-purple"></i>
            <i class="item indigo"></i>
            <i class="item blue"></i>
            <i class="item light-blue"></i>
            <i class="item cyan"></i>
            <i class="item green"></i>
            <i class="item light-green"></i>
            <i class="item lime"></i>
            <i class="item yellow"></i>
            <i class="item amber"></i>
            <i class="item orange"></i>
            <i class="item deep-orange"></i>
            <i class="item brown"></i>
            <i class="item grey"></i>
            <i class="item blue-grey"></i>
          </div>
        </div>
      </section>

      <!-- 粗细 -->
      <section class="width" id="width">
        <i class="iconfont icon-width"  hidden></i>
        <span class="widthWapper" id="toWidth"><span id="value1"></span></span>
        <form class="bar">
          <input type="range" max="20" min="1" step="1" id="lineWidth" class="range" value="10" oninput="changeSpeed()">
        </form>
      </section>

      <!-- 撤回、橡皮、清空 -->
      <span id="tool2">
        <i class="iconfont icon-chexiao" id="cancel"></i>
        <i class="iconfont icon-qingkong" id="eraser"></i>
        <i class="iconfont icon-ziyuan clear" id="clr"></i>
      </span>
      
    </div>

    <div class="save" id="saveImg">保存</div>

  </div>

  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
  <script src="/assets/js/canvas/mopan3.js"></script>
  <script>
    var canvasH = canvas.height / 2 + 40
    $("#caozuoArea").css({
      height:window.innerHeight - canvasH
    })
  </script>
</body>
</html>
